<template>
  <view class="my-repair">
    <life-empty v-if="!repairList.length" url="/pkg-reply/online-reply/online-reply" tip="您还没有提交报修，请点击">
    </life-empty>
    <view class="repair-list" v-else>
      <repair-item @updateList="updateList" :repairItem="item" v-for="item in repairList" :key="item.id"></repair-item>
      <life-button @click="onButton" icon="../../static/icon/repair.png" title="添加新报修"></life-button>
    </view>
  </view>
</template>

<script>
  import {
    getHouseList,
  } from '../../api/house.js'
  import {
    getRepairList,
  } from '../../api/repair.js'
  export default {
    data() {
      return {
        repairList: [],
        total: '',
        query: {
          current: 1,
          pageSize: 10
        },
        loading: false
      }
    },
    onReachBottom() {
      if (this.loading) return
      if (this.repairList.length === this.total) {
        uni.showToast({
          title: '数据已加载完'
        })
        return
      }
      this.query.current++
      this.getRepairList()

    },
    methods: {
      updateList() {
        this.repairList = []
        this.query = {
          current: 1,
          pageSize: 10
        }
        this.getRepairList()
      },
      onButton() {
        uni.navigateTo({
          url: '/pkg-reply/online-reply/online-reply'
        })
      },
      async getRepairList() {
        try {
          this.loading = true
          uni.showLoading()
          const res = await getRepairList(this.query)
          this.repairList = [...this.repairList, ...res.data.rows]
          this.total = res.data.total
        } catch (e) {
          //TODO handle the exception
          console.log(e);
        } finally {
          this.loading = false
          uni.hideLoading()
        }
      }
    },
    onLoad() {
      this.getRepairList()
    }
  }
</script>

<style lang="scss">
  .my-repair {
    height: 100%;
    background-color: #FAFAFA;
    padding-top: 40rpx;
    padding-bottom: 350rpx;
    // overflow: hidden;
  }

  .repair-list {
    padding: 0 40rpx;
    background-color: #FAFAFA;
    overflow: hidden;
  }

  ::v-deep .u-swipe-action-item__content {
    background-color: unset !important;
  }

  ::v-deep .u-swipe-action-item {
    background-color: #CC655E;
    border-radius: 16rpx;
  }

  ::v-deep .u-swipe-action {
    margin-bottom: 20rpx;
  }

  ::v-deep .house-item {
    .title {
      padding: 0 30rpx;
    }
  }
</style>
